
var content = document.getElementsByClassName('content')[0];
var carousel = document.getElementById('carousel');
var focusPoint = document.getElementById('focus');
var less = document.getElementById('less');
var great = document.getElementById('great');

content.onmouseenter = function () {
    focusPoint.style.display = 'block';
}

content.onmouseleave = function () {
    focusPoint.style.display = 'none';
}

var pic = 0;
var imgWidth = carousel.children[1].offsetLeft;
less.onclick = function () {
    clearInterval(carousel.timer);
    if (pic === 0) return
    pic--;
    var target = -imgWidth * pic;
    animate(carousel, target);
}

great.onclick = function () {
    clearInterval(carousel.timer);
    if (pic === carousel.children.length - 1) return;
    pic++;
    var target = - imgWidth * pic;
    animate(carousel, target);
}


// 动画效果
function animate(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var leader = obj.offsetLeft;
        var step = 10;
        step = leader < target ? step : -step;
        if(Math.abs(leader - target) >= Math.abs(step)){
            leader += step;
            obj.style.left = leader + 'px';
        } else {
            obj.style.left = target + 'px';
            clearInterval(obj.timer);
        }
    },15)
}
